<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>前端工程师简历</title>
<meta name="description" content="本人英文名Ahab，是一名前端工程师,对前端和编程技术非常热爱，做过很多技术方面的东西，对我有意向的公司和猎头可以QQ联系我或者给我发邮件，谢谢！">
<meta name="keywords" content="Ahab简历，前端工程师，求职前端，前端博客" />
<meta name="author" content="Ahab，个人博客:http://www.cnblogs.com/arhab/">

<!-- Favicons================================================== -->
<link rel="shortcut icon" href="img/favicon_jianli.ico" type="image/x-icon">


<!-- Bootstrap -->
<link rel="stylesheet" type="text/css"  href="css/bootstrap.css">
<!-- 错xxxxxxxxxxxx字体图标的问题，通过resource AJAX下载 -->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">

<!-- Slider=====轮播样式============================================= -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">

<!-- Stylesheet======样式文件============================================ -->
<link rel="stylesheet" type="text/css"  href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">

<!-- 错xxxxxxxxxxxx字体图标的问题 -->
<link rel="stylesheet" type="text/css" href="fonts/sns_fonts/iconfont.css">


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
    <!-- Navigation -->
    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top"><!-- <i class="fa fa-terminal"> </i>-->前端工程师</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">基本资料</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#works">项目经验</a>
                    </li>                    
                    <li>
                        <a class="page-scroll" href="#about">专业技能</a>
                    </li>                    
                    <li>
                        <a class="page-scroll" href="#team">工作经历</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#testimonials">自我评价</a>
                    </li>                    
                    <li>
                        <a class="page-scroll" href="#contact">联系方式</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

<!-- Header -->
    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h1>简历<span class="brand-heading">-前端工程师</span></h1>
                        <p class="intro-text">喜欢设计，热爱技术</p>
                        <!-- 字体图标按钮 -->
                        <a href="#services" class="btn btn-circle page-scroll">
                            <i class="fa fa-angle-double-down animated"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
<div class="copyrights">Ahab简历 <a href="javascript:;">前端工程师</a></div>
<!-- Services Section -->
<div id="services" class="text-center">
  <div class="container">
    <div class="section-title center">
      <h2>基本 <strong>资料</strong></h2>
      <hr>
      </div>
    <div class="space"></div>
    <div class="row">
      <div class="col-md-3 col-sm-6 service"> 
        <i class="fa fa-laptop"></i>
         <!-- <img src="img/Avatar.png" width="70px"> -->
        <h4><strong>个人信息</strong></h4>
        <p>
		姓名: 李大田 &nbsp;性别：男<br>
		年龄: 23岁 籍贯：山西省运城市新绛县
		</p>
      </div>
      <div class="col-md-3 col-sm-6 service"> <i class="fa fa-code"></i>
        <h4><strong>专业学历</strong></h4>
        <p>
		专业：计算机科学与技术<br>
		学历：大学本科<br>
		
		</p>
      </div>
      <div class="col-md-3 col-sm-6 service"> <i class="fa fa-rocket"></i>
        <h4><strong>毕业学校</strong></h4>
        <p>
		  毕业学校：山西大同大学<br>
		  学习技能：UI设计、前端编程
		</p>
      </div>
      <div class="col-md-3 col-sm-6 service"> <i class="fa fa-bullseye"></i>
        <h4><strong>联系方式</strong></h4>
        <p>电话：18404904826<br>
		  邮箱：18404904826@163.com</p>
      </div>
    </div>
  </div>
</div>
<!-- Portfolio Section -->
<div id="works">
  <div class="container"> <!-- Container -->
    <div class="section-title text-center center">
      <h2>项目 <strong>经验</strong></h2>
      <hr>
      <div class="clearfix"></div>
      <p>主要涉及互联网，电商，金融，游戏，包括PC端，手机端，微信端，移动APP端等等，主要技术是HTML+CSS+JS</p>
    </div>
    <div class="categories">
      <ul class="cat">
        <li>
          <ol class="type">
            <li><a href="#" data-filter="*" class="active">所有</a></li>
            <li><a href="#" data-filter=".web">PC端</a></li>
            <li><a href="#" data-filter=".app">移动端</a></li>
            <li><a href="#" data-filter=".branding">响应式</a></li>
          </ol>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="row">
      <div class="portfolio-items">
	  <!-- 作品集1 JD -->
        <div class="col-sm-6 col-md-3 col-lg-3 web">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4><a href="./works/JD/index.html" target='_blank' title="京东商城">京东商城</a></h4>
                <small>技术：HTML+CSS+jQuery</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="img/portfolio/JD.png" class="img-responsive" alt="京东商城"></div>
          </div>
        </div>
    <!-- 作品集2 微金所-->
		
        <div class="col-sm-6 col-md-3 col-lg-3 web">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4><a href="./works/wjs/index.html"  target='_blank' title="微金所理财">微金所理财</a></h4>
                <small>技术：bootstrap 响应式开发</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="img/portfolio/wjs.png" class="img-responsive" alt="微金所理财"></div>
          </div>
        </div>
    <!-- 作品集3 微金所-->
		
        <div class="col-sm-6 col-md-3 col-lg-3 web">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4><a href="./works/360/index.html" target='_blank' title="360安全浏览器">360安全浏览器</a></h4>
                <small>技术：CSS3+JQuery</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="img/portfolio/360.png" class="img-responsive" alt="360安全浏览器"></div>
          </div>
        </div>
    <!-- 作品集4 Bing-->
		
        <div class="col-sm-6 col-md-3 col-lg-3 web">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4><a href="./works/Bing/Bing.html" target='_blank' title="Bing搜索">Bing搜索</a></h4>
                <small>技术：VueJS + Vue-resource</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="img/portfolio/bing.png" class="img-responsive" alt="Bing搜索"></div>
          </div>
        </div>

    <!-- 作品集5 五子棋-->

        <div class="col-sm-6 col-md-3 col-lg-3 web">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4><a href="./works/game/index.html" target='_blank' title="JS原生五子棋">JS原生五子棋</a></h4>
                <small>技术：HTML+CSS+JavaScript</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="img/portfolio/wuziqi.png" class="img-responsive" alt="JS原生五子棋">
			      </div>
          </div>
        </div>
    <!-- 作品集6 左云县综合技术学校+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++    -->

        <div class="col-sm-6 col-md-3 col-lg-3 branding">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4><a href="http://zyxzhjsxx.baiduyunsx.lcweb02.cn/" target='_blank' title="左云县综合技术学校">左云县综合技术学校</a></h4>
                <small>技术：JQuery + PHP</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="img/portfolio/zy.png" class="img-responsive" alt="左云县综合技术学校"></div>
          </div>
        </div>

    <!-- 作品集7 blog-->

        <div class="col-sm-6 col-md-3 col-lg-3 branding app web">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4><a href="./works/blog/index.html" target='_blank' title="个人博客">个人博客</a></h4>
                <small>技术：HTMl+CSS+JS+Wordpress</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="img/portfolio/blog.png" class="img-responsive" alt="个人博客"></div>
          </div>
        </div>
    <!-- 作品集8 爬虫-->

        <div class="col-sm-6 col-md-3 col-lg-3 web app">
          <div class="portfolio-item">
		  
            <div class="hover-bg"> 
              <div class="hover-text">
                <h4><a href="./works/cnblogSpider/index.js" target='_blank' title="基于 nodejs 的博客园爬虫">基于 nodejs 的博客园爬虫 </a></h4>
                <small>技术：NodeJS+Express</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> 
				      </div>
              <img src="img/portfolio/spder.png" class="img-responsive" alt="基于 nodejs 的博客园爬虫">
		        </div>
          </div>
        </div>
        <!-- 作品集9 canvas-->

            <div class="col-sm-6 col-md-3 col-lg-3 web app">
              <div class="portfolio-item">
          
                <div class="hover-bg"> 
                  <div class="hover-text">
                    <h4><a href="./works/canvas7.html" target='_blank' title="基于 Canvas 的交互式绘图">基于 Canvas 的交互式绘图 </a></h4>
                    <small>技术：Canvas+Three.js</small>
                    <div class="clearfix"></div>
                    <i class="fa fa-search"></i> 
                  </div>
                  <img src="img/portfolio/can.png" class="img-responsive" alt="基于 Canvas 的交互式绘图">
                </div>
              </div>
            </div>
        <!-- 7 原型设计 -->

          <div class="col-sm-6 col-md-3 col-lg-3 web app">
            <div class="portfolio-item">
        
              <div class="hover-bg"> 
                <div class="hover-text">
                  <h4><a href="./works/ele.png" target='_blank' title="PS原型设计">PS原型设计 </a></h4>
                  <small>技术：PhotoShop</small>
                  <div class="clearfix"></div>
                  <i class="fa fa-search"></i> 
                </div>
                <img src="img/portfolio/yx.png" class="img-responsive" alt="PS原型设计">
              </div>
            </div>
          </div>


      </div>
    </div>
  </div>
</div>
<!-- About Section -->
<div id="about">
  <div class="container">
    <div class="section-title text-center center">
      <h2><strong>专业</strong> 技能</h2>
      <hr>
    </div>
    <div class="row">
      <div class="col-md-6"> <img src="img/about.png" class="img-responsive"> </div>
      <div class="col-md-6">
        <div class="about-text"> 
          <!-- <i class="fa fa-users"></i> -->
          <i class="fa fa-magic"></i>
          <div class="padding-left">
            <h4>UI设计</h4>
            <p>1. 精通 Xmind 等思维导图软件；<br>
               2. 精通 PhotoShop 图像处理软件，对 Adobe Illustrator，CorelDRAW也有了解；</p>
          </div>
          <i class="fa fa-users"></i>
          <div class="padding-left">
            <h4>PC端</h4>
            <p>熟练使用HTML5/CSS3技术，熟悉Javascript/jquery编程,能够熟练使用Vue.js,对Angularjs，Reactjs等前端MV*框架也有了解，熟练的使用grunt，gulp等前端工具，了解less，sass，stylus，coffeescript等前端新技术</p>
          </div>
          <i class="fa fa-magic"></i>


          <div class="padding-left">
            <h4>移动端</h4>
            <p>熟练使用zepto.js，Frozen ui，Amaze ui等移动框架进行移动页面的开发，熟练使用threejs等js引擎进行简单的3d效果和H5游戏的开发.</p>
          </div>
          <i class="fa fa-check-square-o"></i>
          <div class="padding-left"><h4>其它</h4>
          <p>懂网站性能优化，网站百度排名和SEO优化，熟练使用photoshop等切图工具，会常见的UI技巧，懂PHP，Python等后台语言开发.</p></div>
        </div>
      </div>
    </div>
  </div>
</div>
	<div id="achivements" class="section dark-bg">
			<div class="container">	
				<div class="row">
					<div class="col-md-3 col-sm-3">
						<div class="achivement-box">
							<i class="fa fa-smile-o"></i>
							<span class="count">23</span>
							<h4>Age Years</h4>                            
						</div>
					</div> 
					<div class="col-md-3 col-sm-3">
						<div class="achivement-box">
							<i class="fa fa-code"></i>
							<span class="count">30000</span>
							<h4>Code Amount</h4>                            
						</div>
					</div> 
					<div class="col-md-3 col-sm-3">
						<div class="achivement-box">
							<i class="fa fa-check-square-o"></i>
							<span class="count">2800</span>
                            <h4>Work Hour</h4>
						</div>
					</div> 
					<div class="col-md-3 col-sm-3">
						<div class="achivement-box">
							<i class="fa fa-trophy"></i>
							<span class="count">12</span>
							<h4>Projects Amount</h4>                            
						</div>
					</div> 
				</div>
			</div>
		</div>
<!-- Team Section -->
<div id="team" class="text-center">
  <div class="container">
    <div class="section-title center">
      <h2>人生 <strong>经历</strong></h2>
      <hr>
      <p>喜欢设计，热爱互联网，热爱技术，专注于前端技术开发和用户体验</p>
    </div>
    <div id="row">
	
	<div class="col-md-3 col-sm-6">
        <div class="thumbnail"> <img src="img/team/university.jpg" alt="山西大同大学" class="img-circle team-img">
          <div class="caption">
            <h3>山西大同大学</h3>
            <p>计算机科学与技术</p>
            <p>主修课程：数据结构与算法、操作系统、计算机组成原理、数据库原理、面向对象程序设计、计算机网络、C语言、Java语言、网站设计与维护、软件工程、电子商务、3D设计等，大学期间做过很多项目，很喜欢编程</p>
          </div>
        </div>
      </div>
	
      <div class="col-md-3 col-sm-6">
        <div class="thumbnail"> <img src="img/team/01.jpg" alt="北京尚学堂培训中心" class="img-circle team-img">
          <div class="caption">
            <h3>北京尚学堂培训中心</h3>
            <p>前端培训</p>
            <p>主要培训HTMl，CSS，JS，Jquery技术，还有ajax，ui等基础知识和一些常见的angular，react等MVC框架</p>
          </div>
        </div>
      </div>
	  
      
	  
      <div class="col-md-3 col-sm-6">
        <div class="thumbnail"> <img src="img/team/shixi.jpg" alt="左云县综合技术学校" class="img-circle team-img">
          <div class="caption">
            <h3>左云县综合技术学校</h3>
            <p>前端顾问</p>
            <p>工作时间：2017.3-2017.5，主要负责学校网站开发工作的修改建议，包括设计，PC端，移动端等等</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="thumbnail"> <img src="img/team/04.jpg" alt="毕业设计" class="img-circle team-img">
          <div class="caption">
            <h3>大同市科技信息网</h3>
            <p>前端工程师</p>
            <p>工作时间：2015.12-至今，主要进行需求分析研究，界面设计，确定页面内容，交互功能；
              项目依赖初始化，入口文件编码及相关视图的创建编码；
                测试前端流程及样式开发</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Testimonials Section -->
<div id="testimonials" class="text-center">
  <div class="container">
    <div class="section-title center">
      <h2>自我 <strong>评价</strong></h2>
      <hr>
    </div>
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div id="testimonial" class="owl-carousel owl-theme">
          <div class="item">       
            <p>
			     强烈求知欲和好奇心，热爱学习,喜欢接触一切新鲜事物<br>性格温和，易和人相处，拥有良好的亲和力。
			</p>
          </div>
          <div class="item">
            <p>
			有强烈的责任感，工作踏实，积极上进，吃苦耐劳。<br>能在较大的压力下保持良好的工作状态，善于自我调节。
			</p>
          </div>
          <div class="item">
            <p>
			非常热爱编程，喜欢钻研新的技术，喜欢接受各种不同的挑战。<br>具的较强的自学能力并有成体系的学习方法。
			</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Contact Section -->
<div id="contact" class="text-center">
  <div class="container">
    <div class="section-title center">
      <h2><strong>联系</strong> 方式</h2>
      <hr>
    </div>
    <div class="col-md-8 col-md-offset-2">
      <div class="col-md-4"> <i class="fa fa-map-marker fa-2x"></i>
        <p>山西省大同市南郊区大同大学北校区</p>
      </div>
      <div class="col-md-4"> <i class="fa fa-envelope-o fa-2x"></i>
        <p>18404904826@163.com</p>
      </div>
      <div class="col-md-4"> <i class="fa fa-phone fa-2x"></i>
        <p>电话：18404904826</p>
      </div>
      <hr>
      <div class="clearfix"></div>
    </div>
    <div class="col-md-8 col-md-offset-2">
      <hr>
      <h3>给我发邮件</h3>
      <form name="sentMessage" id="contactForm" novalidate>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <input type="text" id="name" class="form-control" placeholder="姓名" required="required">
              <p class="help-block text-danger"></p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <input type="email" id="email" class="form-control" placeholder="邮箱" required="required">
              <p class="help-block text-danger"></p>
            </div>
          </div>
        </div>
        <div class="form-group">
          <textarea name="message" id="message" class="form-control" rows="4" placeholder="内容" required></textarea>
          <p class="help-block text-danger"></p>
        </div>
        <div id="success"></div>
        <button type="submit" class="btn btn-default">确认发送</button>
      </form>
    </div>
  </div>
</div>
<nav id="footer">
  <div class="container">
    <div class="pull-left fnav">
      <p>Copyright &copy; 2017 作者：Ahab. 前端工程师 
      <!-- <script src="js:;" language="JavaScript"></script> -->
	  <a style='color:#F4D03F' href="http://www.cnblogs.com/arhab/" target="_blank" title="前端博客">个人博客</a> </p>
    </div>
    <div class="pull-right fnav">
      <ul class="footer-social">
	    <li><a href="javascript:;"><i class="icon iconfont">&#xe66e;</i></a></li>
        <li><a href="javascript:;"> <i class="icon iconfont">&#xe629;</i></a></li>
        <li><a href="javascript:;"> <i class="icon iconfont">&#xe616;</i></a></li>

        <li><a href="javascript:;"><i class="icon iconfont">&#xe66b;</i></a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script type="text/javascript" src="js/jquery.1.11.1.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script type="text/javascript" src="js/SmoothScroll.js"></script> 
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
<script type="text/javascript" src="js/jquery.isotope.js"></script> 
<script type="text/javascript" src="js/jquery.counterup.js"></script> 
<script type="text/javascript" src="js/waypoints.js"></script>
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script> 
<script type="text/javascript" src="js/contact_me.js"></script>
<script src="js/owl.carousel.js"></script>

<!-- Javascripts  fixed导航条的背景色================================================== --> 
<script type="text/javascript" src="js/main.js"></script>

<script>
 $(function(){
   var u = navigator.userAgent;
   if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1||u.indexOf('iPhone') > -1||u.indexOf('Windows Phone') > -1||navigator.userAgent.indexOf("iPad")>-1) {

     $(".hover-bg .hover-text").css({'opacity':'1'});
     $(".hover-bg .hover-text>h4").css({'opacity':'1','-webkit-transform':'translateY(0)','transform':'translateY(0)'});
     $(".hover-bg .hover-text>i").css({'opacity':'1'});
  } 
      
 });
  
</script>
</body>
</html>